<script lang="ts" setup>
    import {onMounted, ref, reactive, watch, computed, defineComponent, toRaw, PropType} from 'vue'
    import draggable from 'vuedraggable';
    import { IconClose,IconCaretDown, IconCaretUp } from '@arco-design/web-vue/es/icon';
    import { 
        COUNT_TIME_OPTION, 
        CHOOSE_FUNCTION_OPTION, 
        FROMULA_MODE_OPTION,
        DIMENSION_TYPE
    } from '@/constants/indexDevelop'
    import { useRouter, useRoute} from 'vue-router';
    import CheckDialog from '../checkDialog/index.vue'
    import ModelDataResult from '../modelDataResult/index.vue'
    import { useStore } from '@/store';
    import { Message } from '@arco-design/web-vue';
    import API from '@/services'
    import Bus from '@/utils/emmit'
    import {debounce} from 'lodash'

    const store = useStore()
    const route = useRoute();
    const router = useRouter();
    let status = ref<any>(route.query.status);
    let query = ref<any>(route.query);

    const checkDimensionRef = ref()

    const factTableName = ref<string>('') // 事实表名称

    // 是否展示预览结果
    const isShowPreview = ref<Boolean>(false)

    // 拖动到区域的数据
    const acceptGragData = ref<any>([])

    // 行为限定
    const limitDragData = ref([])


    // 计算方式拖放区域
    const formulaDragData = ref([])

    // 获取原子指标的英文名称
    const indexEnName = computed(() => store.state.metricsdevelop.metricsEnName);

    // 获取选中模型后的事实表名称
    
    const dataModelId = computed(() => store.state.metricsdevelop.dataModelId);


    const factName = computed(() => store.state.metricsdevelop.factTableName);


    // 行为限定
    let filterValueOneMuilt = ref<any>(null)

    const props = defineProps({
        metricsDetailData: {
            type: Object as PropType<any>,
            default: () => {}
        }
    })
    const actionLimitType = reactive({
        actionLimitShow: false,
    })
    let formParams = reactive<any>({
        countDateType: COUNT_TIME_OPTION[0].value,

        countDateWay: '',

        countWay: FROMULA_MODE_OPTION[0].value,
        countColumn: '',
        countDateColumn: '',
        filter: {

        },
        actionLimitOptions: [],
        pageNum: 1,
        pageSize: 10,
        status: null,
        type: 0, // 0 表视角；1指标视角
        modelId: ''
    })
    // 查看
    const handleCheckFeild = () => {
        checkDimensionRef.value.openCheckDialog()
    }

    // 预览的表视角数据
    const previewData :any = ref(null)

    // 预览指标视角数据
    const indexViewData:any = ref(null)

    const vaildTip = (params: any) => {
        
        if (!params.countDateType) {
            Message.warning("请选择统计时间")
            return true;
        }
        if (!params.countDateColumn) {
            Message.warning("请拖放统计时间字段")
            return true;
        }
        if (!params.countWay) {
            Message.warning("请选择计算方式")
            return true;
        }
        if (!params.countColumn) {
            Message.warning("请拖放计算方式字段")
            return true;
        }
        // if (!params.filter.tableFieldName) {
        //     Message.warning("请拖放行为限定字段")
        //     return true;
        // }
        if (!(params.filter && Object.keys(params.filter).length)) {
            return false
        }
        if (params.filter.tableFieldName && 
            (params.filter.countWay === 'IN' || params.filter.countWay === 'NOT_IN')) {
            if (!filterValueOneMuilt.value?.length) {
                Message.warning("请选择行为限定的类型数据")
                return true;
            }
        }
        if (params.filter.tableFieldName && params.filter.countWay === 'LIKE') {
            if (!filterValueOneMuilt.value) {
                Message.warning("请输入行为限定的类型数据")
                 return true;
            }
            if (formParams.filter.tableFieldType != 'STRING') {
                Message.warning("行为限定选LIKE时，拖放的字段必须是STRING类型")
                return true;
            }
            
        }
        
    }

    // 提取公共入参
    const commonParams = () => {
        let {
            countDateType,
            countDateWay,
            countWay,
            filter,
        } = toRaw(formParams)
        let params :any = {
            countDateType,
            countDateWay,
            countWay,
            filter,
            metricsId: Number(query.value.metricsId),
            modelId: dataModelId.value,
            id: Number(query.value.id)
        }
        if (params.filter) {
            if (Array.isArray(filterValueOneMuilt.value)) {
                params.filter.filterValueOne = filterValueOneMuilt.value.join()
            } else {
                params.filter.filterValueOne = filterValueOneMuilt.value
            }
        }
        if (Array.isArray(acceptGragData.value)) {
            params.countDateColumn = acceptGragData.value.join()
        }
        if (Array.isArray(formulaDragData.value)) {
            params.countColumn = formulaDragData.value.join()
        }
        if (params.filter && Array.isArray(limitDragData.value)) {
            params.filter.tableFieldName = limitDragData.value.join()
        }
        if (params.filter && params.filter.tableFieldName == '') {
            params.filter = null
        }
        return params
    }

    // 切换分页
    const changePageNum = (v:any, type:any) => {
        let {current, pageSize} = v
        formParams.pageNum = current
        formParams.pageSize = pageSize
        handlePreviewData(type)
    }
     const changePageSize = (v:any, type:any) => {
        let {current, pageSize} = v
        formParams.pageNum = current
        formParams.pageSize = pageSize
        handlePreviewData(type)
    }
    // 预览
    const handlePreview = debounce(() => {
        formParams.pageNum = 1
        formParams.pageSize = 10
        handlePreviewData(0) // 表视角
    }, 1000, {leading: true, trailing: false})

    // 预览切换tab
    const changeTableTab = (v:any) => {
        formParams.pageNum = 1
        formParams.pageSize = 10
        handlePreviewData(Number(v))
    }

    /**
     * @description 预览
     * @type  0：表视角；1：指标视角
     * @status 0:草稿；1：上线；2：下线
     */
    const handlePreviewData = async (type:any) => {
        const params = {
            pageNum: formParams.pageNum,
            pageSize: formParams.pageSize,
            status: 0, // 默认草稿
            type,
        }
        const commonQuery = commonParams()
        const vaildPrams = {...commonQuery,...params} 

        const vaild = vaildTip(vaildPrams)
        if (vaild) return;
        try {
            const res = await API.metricsModelRelation.postGetMetricsModelData({
                ...vaildPrams
            })
            if (res.code === 200) {
                if (type === 0) {
                    previewData.value = res.data

                } else if (type === 1) {
                    indexViewData.value = res.data
                }
                isShowPreview.value = true 
            }
            
        } catch (error) {}
    }

    /**
     * @description 保存、保存并上线
     * @type  类型；保存还是保存并上线
     * @status 0:草稿；1：上线；2：下线
     * @successTip 成功提示
     */
    const handleSaveMetrics =  async (type: string, status:any, successTip:string) => {
        const params = {
            type: 0,// 默认表视角
            status
        }
        const commonQuery = commonParams()
        const vaildPrams = {...commonQuery,...params} 
        const vaild = vaildTip(vaildPrams)
        if (vaild) return;

        if (type=='editSave') {
            try {
                const {code} = await API.metricsModelRelation.postUpdateMetricsModel({
                    ...vaildPrams
                })
                if (code === 200) {
                    router.go(-1)
                    Message.success(successTip)
                }
            } catch (error) {}
        } else {
            try {
                const {code} = await API.metricsModelRelation.postSaveMetricsModel({
                    ...vaildPrams
                })
                if (code === 200) {
                    router.go(-1)
                    Message.success(successTip)
                }
            } catch (error) {}
        }  
    }
    const repeatItem = (val:any, gragData:any) => {
        const {item} = val
        const tableFieldName = item._underlying_vm_.tableFieldName
        gragData.value = gragData.value.filter((item:any) => item.tableFieldName != tableFieldName)
        gragData.value.push(tableFieldName)

        if ((new Set(gragData.value)).size != gragData.value.length) {
            let newArr =[...new Set(gragData.value)]
            gragData.value = newArr
            Message.warning('该数据项已经添加，请勿重复添加.');
        }
    }

    const filterEleItem = (data:any, val:any) => {
        return data.filter((item:any) => item.tableFieldName != val.tableFieldName
        )
    }

    // 统计时间  拖拽不能有重复
    const handleCountTime = (val:any) => {
        let dragItem = val.item._underlying_vm_
        if (!formParams.countDateWay && acceptGragData.value?.length === 2) {
            Message.warning('未选择函数不能拖放多个数据项');
            acceptGragData.value = filterEleItem(acceptGragData.value, dragItem)
            return;
        }
        if (dragItem.tableFieldType != 'DATETIME') {
            Message.warning('统计时间只能拖放DATETIME数据类型');
            acceptGragData.value = filterEleItem(acceptGragData.value, dragItem)
            return
        }
        repeatItem(val, acceptGragData)
    }

    // 计算方式
    const handleFormMode = (val:any) => {
        let dragItem = val.item._underlying_vm_
        if (formulaDragData.value?.length === 2) {
            Message.warning('计算方式只能拖动一项');
            formulaDragData.value = filterEleItem(formulaDragData.value, dragItem)
            
            return;
        }
        if (formParams.countWay === 'sum' && dragItem.tableFieldType != 'DECIMAL' && dragItem.tableFieldType != 'INTEGER') {
            Message.warning('计算方式为sum时只能选DECIMAL数据类型和INTEGER数据类型');
            formulaDragData.value = []
            return;
        }
         repeatItem(val, formulaDragData)
    }

    // 切换计算方式时，清空计算方法拖动的数据
    const handleChangeFormulaMode = () => {
        formulaDragData.value = []
    }


    // 行为限定 拖拽不能有重复,只能拖绑定了维度的
    const handleActionLimit = (val:any) => {
        let dragItem = val.item._underlying_vm_
        // 判断是否绑定维度
        if (!dragItem.ifBindDimension) {
            limitDragData.value = filterEleItem(limitDragData.value, dragItem)
            Message.warning('行为限定只能拖放已绑定维度项');
            return;
        }
        if (limitDragData.value?.length === 2) {
            Message.warning('行为限定只能拖动一项');
            limitDragData.value = filterEleItem(limitDragData.value, dragItem)
            return;
        }

       repeatItem(val, limitDragData)

       formParams.filter.countWay = 'IN'
       filterValueOneMuilt.value = null
       actionLimitType.actionLimitShow = true
       formParams.filter.dimensionId = val.item._underlying_vm_.dimensionId
       formParams.filter.dimensionName = val.item._underlying_vm_.dimensionName
       formParams.filter.tableName = val.item._underlying_vm_.tableName
       formParams.filter.tableId = val.item._underlying_vm_.tableId
       formParams.filter.tableFieldType = val.item._underlying_vm_.tableFieldType
       getInOrNotInOption(val.item._underlying_vm_.dimensionId)
    }

    const handleCloseTag = (type:string, ele:any, index:number) => {
        switch(type) {
            case 'countTime':
                acceptGragData.value.splice(index, 1)
                break;
            case 'formulaMode':
                formulaDragData.value.splice(index, 1)
                break;
            case 'actionLimit' :
                limitDragData.value.splice(index, 1)
                actionLimitType.actionLimitShow = false
                formParams.filter.countWay = 'IN'
                filterValueOneMuilt.value = null
                formParams.actionLimitOptions = []
        }
    }

    // 获取in和not in类型时的下拉数据
    const getInOrNotInOption = async (id:any) => {
        try {
            const {code, data} = await API.dataTable.getDataTableGetDimensionEnumById({
                id
            })
            if (code === 200) {
                formParams.actionLimitOptions = data?.map((item:any) => {
                    return {
                        label: item.value,
                        value: item.value
                    }
                })
            }
        } catch (error) {
            
        }
    }
    // 改变行为限定类型
    const handleChangeType = (v:any) => {
        filterValueOneMuilt.value = null
        formParams.filter.countWay = v
        if (!formParams.actionLimitOptions?.length) {
            getInOrNotInOption(formParams.filter.dimensionId)
        }
    }

    // 保存并上线---保存
    Bus.on('saveMetrics', (n:number) => {
        let successTip = n ? '保存并上线成功' : '保存成功'
        let failTip = n ? '保存并上线失败' : '保存失败'
        if (query.value.id) { // 编辑态
            handleSaveMetrics('editSave',n, successTip)
        } else { // 新建
            handleSaveMetrics('buildSave',n, successTip)
        } 
    })

    // 切换数据模型清空所有数据
    const resetData = () => {
    // 计算方式拖放区域
        formParams.countDateType = COUNT_TIME_OPTION[0].value;
        formParams.countDateWay = '';
        formParams.countColumn = '';
        formParams.countDateColumn = '';
        formParams.countWay = FROMULA_MODE_OPTION[0].value;
        acceptGragData.value = []
        limitDragData.value = []
        formulaDragData.value = []
        formParams.filter = {}

        isShowPreview.value = false
        actionLimitType.actionLimitShow = false

    }
    Bus.on('changeDataModal', () => {
        resetData()
    })
    
    watch(
        () => props.metricsDetailData,
        (val) => {
            if (val) {
                const editValue = reactive<any>({
                    countDateType: val?.countDateType,
                    countDateWay: val?.countDateWay,
                    countWay: val?.countWay,
                    countColumn: val?.countColumn,
                    countDateColumn: val?.countDateColumn,
                    filter: val?.filter || null
                })
                formParams.countDateType = editValue.countDateType
                formParams.countDateWay = editValue.countDateWay
                formParams.countWay = editValue.countWay
                formParams.countColumn = editValue.countColumn
                formParams.countDateColumn = editValue.countDateColumn
                formParams.filter = editValue?.filter || {}
                formParams.modelId = editValue.modelId

                acceptGragData.value = formParams.countDateColumn?.split(',')
                
                formulaDragData.value = formParams.countColumn?.split(',')
               
                limitDragData.value = formParams.filter?.tableFieldName?.split(',') || []


                
                if (Object.keys(formParams.filter).length) {
                    if (formParams.filter.countWay === 'IN' || formParams.filter.countWay === 'NOT_IN') {
                        filterValueOneMuilt.value = formParams.filter.filterValueOne.split(',')
                        getInOrNotInOption(formParams.filter?.dimensionId)
                    } else {
                        filterValueOneMuilt.value = formParams.filter.filterValueOne
                    } 
                    actionLimitType.actionLimitShow = true
                } else {
                    formParams.filter.countWay = ''
                }
            }
        }
    )
    watch(factName, (val: any) => {
      if (val) {
        factTableName.value = val
      }
    },{
        immediate:true
    });
</script>

<template>
    <div class="dimension-content">
        <div class="dimension-content_top">
            <tr class="dis-flex">
                <td class="col_9B9 w70 flex-end">select</td>
                <td class="sql-line"></td>
                <td class="content-right">
                    <div class="dis-flex align-item">
                        <span class="col_red">*</span>
                        <span class="col_606 ml-4 w75">统计时间：</span>
                        <a-select  
                            v-model="formParams.countDateType" 
                            :disabled="status===1 || status==='1'"
                            :options="COUNT_TIME_OPTION"
                            :style="['ml-4', {width: '138px', borderRight:'none'}]"
                            >
                        </a-select>
                        <a-select  
                            v-model="formParams.countDateWay" 
                            :options="CHOOSE_FUNCTION_OPTION"
                            :disabled="status===1 || status==='1'"
                            :style="{width: '138px', borderRadius: 'unset', borderRight:'none'}"
                            placeholder="选择函数"
                        >
                        </a-select>
                        <div class="drag-wrapper">
                            <div v-show="!acceptGragData.length" class="placehodle-text">
                                请拖放
                            </div>
                            <div class="defaultInput disbledDrag" v-if="status===1 || status==='1'">
                                <a-tag 
                                    class="ml-4"
                                    
                                    v-for="(item, index) in formParams.countDateColumn?.split(',')"
                                    :closable="status!='1' && status !=1" >{{item}}
                                    <icon-close  v-show="status===1 || status==='1'"/>
                                </a-tag>
                            </div>
                            
                            <div class="drag-input" v-else>
                                <draggable
                                    class="accept-drag"
                                    :list="acceptGragData"
                                    :group="{name: 'modelList', pull: ''}"
                                    item-key="id"
                                    :sort="false"
                                    ghost-class="accept-drag-ghost"
                                    @add="handleCountTime"
                                    
                                >
                                    <template #item="{element, index}">
                                        <div class="muiltTags">
                                            <span class="arco-tag-size-medium arco-tag arco-tag-checked ml-4">
                                                {{element}}
                                                <icon-close @click="handleCloseTag('countTime', element, index)" class="cp"/>
                                            </span>
                                        </div> 
                                    </template>
                                </draggable>
                            </div>
                            
                        </div>
                        <span class="col_333 ml-10">as stat_time</span>
                    </div>
                    <div class="dis-flex mt-20 align-item">
                        <span class="col_red">*</span>
                        <span class="col_606 ml-4 w75">计算方式：</span>
                        <a-select 
                            v-model="formParams.countWay" 
                            :options="FROMULA_MODE_OPTION"
                            :style="{width: '138px', borderRight:'none'}"
                            placeholder="请输入"
                            @change="handleChangeFormulaMode"
                            :disabled="status===1 || status==='1'"
                        >
                        </a-select>
                        <div class="drag-wrapper">
                            <div v-show="!formulaDragData.length" class="placehodle-text">
                                请拖放
                            </div>
                            <div class="drag-input formulaInput disbledDrag" v-if="status===1 || status==='1'">
                                <a-tag 
                                    class="ml-4"
                                    :closable="status!='1' && status !=1" >
                                    {{formParams.countColumn}}
                                    <icon-close  v-show="status===1 || status==='1'"/>
                                </a-tag>
                            </div>
                            
                            <div class="drag-input" v-else>
                                <draggable
                                    class="accept-drag"
                                    :list="formulaDragData"
                                    :group="{name: 'modelList', pull: ''}"
                                    item-key="id"
                                    :sort="false"
                                    ghost-class="accept-drag-ghost"
                                    @add="handleFormMode"
                                >
                                    <template #item="{element, index}">
                                        <div>
                                            <span class="arco-tag-size-medium arco-tag arco-tag-checked ml-4">
                                                {{element}}
                                                <icon-close @click="handleCloseTag('formulaMode', element, index)" class="cp"/>
                                            </span>
                                        </div>
                                        
                                    </template>
                                </draggable>
                            </div>
                        </div>
                        <span class="col_333 ml-10 max-width300">{{indexEnName}}</span>
                    </div>
                    <div class="mt-20">
                        <span class="col_red">*</span>
                        <span class="col_606 ml-4 w75">可用维度：</span>
                        <span class="col_333 ml-4">(可用维度...)</span>
                        <span class="col_blue ml-6 cp" @click="handleCheckFeild">查看</span>
                    </div>

                </td>
            </tr>
            <tr class="mt-20">
                <td class="col_9B9 w70 flex-end">
                    from
                </td>
                <td class="sql-line">
                </td>
                <td>
                    <span class="col_red">*</span>
                    <span class="col_606 ml-4 w75">数据来源：</span>
                    <span class="col_333 ml-4">{{factTableName}}</span>
                </td>
            </tr>
            <tr class="mt-20">
                <td class="col_9B9 w70 flex-end">
                    where
                </td>
                <td class="sql-line">
                </td>
                <td class="dis-flex align-item content-right">
                    <!-- <span class="col_red">*</span> -->
                    <span class="col_606 ml-4 w75">行为限定：</span>
                    <div class="drag-wrapper-action">
                            <div v-show="!limitDragData?.length" class="placehodle-text" >
                                请拖放
                            </div>
                            <div class="drag-input limitWidth disbledDrag" v-if="status===1 || status==='1'">
                                <a-tag 
                                    class="ml-4"
                                    v-show="limitDragData?.length"
                                    :closable="status!='1' && status !=1" >
                                    {{formParams.filter.tableFieldName}}
                                    <icon-close  v-show="status===1 || status==='1'"/>
                                </a-tag>
                            </div>
                            
                            <div class="drag-input limitWidth" v-else :style="{height: '30px'}">
                                <draggable
                                    class="accept-drag"
                                    :list="limitDragData"
                                    :group="{name: 'modelList', pull: ''}"
                                    item-key="id"
                                    :sort="false"
                                    @add="handleActionLimit"
                                     ghost-class="accept-drag-ghost-action"
                                >
                                    <template #item="{element, index}">
                                        <div>
                                            <span class="arco-tag-size-medium arco-tag arco-tag-checked ml-4">
                                                {{element}}
                                                <icon-close @click="handleCloseTag('actionLimit', element, index)" class="cp"/>
                                            </span>
                                        </div>
                                    </template>
                                </draggable>
                            </div>
                            <!-- </template> -->
                            <div class="action-input ml-6" v-show="actionLimitType.actionLimitShow">
                                <a-select 
                                    v-model="formParams.filter.countWay" 

                                    @change="handleChangeType"

                                    :style="{width: '150px'}"
                                    :disabled="status===1 || status==='1'"
                                >
                                    <a-option 
                                        v-for="item in DIMENSION_TYPE"
                                        :disabled="formParams.filter.tableFieldType != 'STRING' && 
                                        item.disabled"
                                        :value="item.value"
                                        :label="item.label"
                                    >
                                    </a-option>
                                </a-select>
                                <div class="disbledDrag ml-6 disableActionInput "
                                     v-if="(status===1 || status==='1') && formParams.filter &&
                                    (formParams.filter.countWay === 'IN' || formParams.filter.countWay === 'NOT_IN')"
                                >
                                    <a-tag 
                                        class="ml-4"
                                        v-for="(item, index) in filterValueOneMuilt"
                                    >
                                     {{item}}
                                     <icon-close  v-show="status===1 || status==='1'"/>
                                    </a-tag>
                                </div>
                                <a-select 
                                    class="ml-6"
                                    v-if="
                                     Object.keys(formParams.filter).length && 
                                     (formParams.filter.countWay === 'IN' || 
                                     formParams.filter.countWay === 'NOT_IN') &&
                                     status != '1' && status != 1
                                    " 
                                    v-model="filterValueOneMuilt"
                                    :style="{width:'360px',minHeight: '32px', height: 'auto'}" placeholder="请选择" multiple
                                    :options="formParams.actionLimitOptions"
                                    :tag-props="{color:'#f2f3f5'}"
                                    >
                                </a-select>
                                <a-input 
                                    class="ml-6"
                                    :disabled="status===1 || status==='1' "
                                    v-if="formParams.filter.countWay === 'LIKE'" 
                                    v-model="filterValueOneMuilt"
                                    placeholder="请输入"
                                    :style="{width:'360px'}" allow-clear />
                            </div>
                        </div>
                </td>
            </tr>
            <tr class="mt-20">
                <td class="col_9B9 w70 flex-end ">group by</td>
                <td class="sql-line"></td>
                <td class="w90"></td>
                <td>
                    <div class="col_333 ml-4">stat_time,</div>
                    <div class="col_333 mt-24 ml-4">{可用维度...}</div>
                </td>
            </tr>
            <div class="dis-flex ml-92 align-item mt-20">
                <span class="col_606">数据预览：</span>
                <a-button class=" ml-6" type="outline" @click="handlePreview">预览</a-button>
            </div>
        </div>
        <div :class="['table-result', {'initTable': !isShowPreview}]">
                <div class="table-result-title">
                    <div class="tabs-name"><span>数据结果</span></div>
                    <div>
                        <icon-caret-down v-show="isShowPreview" @click="() => {
                            isShowPreview = !isShowPreview
                        }"/>
                        <icon-caret-up v-show="!isShowPreview" @click="() => {isShowPreview = !isShowPreview}"/>
                    </div>
                </div>
                <div class="table-result-data" v-show="isShowPreview">
                    <model-data-result 
                        ref="defaultTabsRef"
                        :preview-data="previewData"
                        :index-view-data="indexViewData"
                        @changePageNum="changePageNum"
                        @changePageSize="changePageSize"
                        @changeIndexPageNum="changePageNum"
                        @changeIndexPageSize="changePageSize"
                        @changeTableTab="changeTableTab"
                    >
                    </model-data-result>
                </div>
        </div>
    </div>
    <check-dialog ref="checkDimensionRef"></check-dialog>
</template>
<style  lang="scss">
.drag-wrapper-action .arco-select-view-multiple.arco-select-view-size-medium .arco-select-view-tag  {
    background-color: #f2f3f5;
    font-size: 14px;
    color: #33353b;
}
.accept-drag-ghost {
    background: #fff !important;
    color: #fff !important;
    border: 1px solid #628CFF !important;
    height: 34px !important;
    font-size: 0px !important;
    border-radius: 0 3px 3px 0 !important;
    svg {
        display: none;
    }
}
.accept-drag-ghost-action {
    background: #fff !important;
    color: #fff !important;
    border: 1px solid #628CFF !important;
    height: 36px !important;
    font-size: 0px !important;
    border-radius: 3px!important;
    svg {
        display: none;
    }

}
</style>
<style lang="scss" scoped>

    .arco-tag-size-medium {
        height: 24px;
        font-size: 14px;
        line-height: 20px;
        background-color: #f2f3f5;
        border-color: transparent;
    }
    .arco-tag {
        display: inline-block;
        box-sizing: border-box;

        padding: 0 6px;
        color: var(--color-text-1);
        font-weight: 500;

        vertical-align: middle;
        border: 1px solid transparent;
        border-radius: var(--border-radius-small);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        // margin-bottom: 2px;
    }
    .max-width300 {
        max-width: 300px;
    }
    .dimension-content :deep(.arco-select-view-single) {
        background: #FFFFFF;
        border: 1px solid #D4D7E1;
        border-radius: 3px 0 0 3px;
        height: 36px;
        &.arco-select-view-disabled {
            background: #F6F8FC;
            color: #33353b;
            opacity: 0.8;
            height: 36px;
        }
    }
    .table-result-data {
        background: #F6F8FC;
        padding: 20px 18px;
    }
     :deep(.arco-select-view-multiple .arco-select-view-inner .arco-select-view-tag) {
        // color: #33353b;
        // font-size: 14px;
    }
    
    @import './index.scss'
</style>